import { Component } from '@angular/core';
import { flush } from '@angular/core/testing';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'four';

  shouldShow = false;

  score = 70;

  color: string | undefined;

  fontSize!: string;
  
  isBordered= true;
 
  classObj={
    bordered:this.isBordered,
    blue:false,
    round:true
  }
  
cities = ['杭州','南京','上海','无锡'];
  
  people : [any,any,any];

  peopleByCity:[any,any];
  
  constructor(){
    
    this.people = [
      {name:'Anderson', age: 35,city:'Sao Paulo'},
      {name:'John', age: 12,city:'Miami'},
      {name:'Peter', age: 35,city:'New York'},

    ];

    this.peopleByCity=[
      {city:'Miami',
      people:[
         {name:'John',age:12},
         {name:'Angle',age:22}
      ]
      },
      {city:'Sao Paulo',
       people:[
        {name:'Anderson',age:35},
        {name:'Feilpe',age:36}
         ]
       }
  ];
  }
  
  onToggle(){
    this.shouldShow = !this.shouldShow;
    return false;
  }
  
  grade(){
    return Math.floor(this.score/10);
  }
  onInput(evt: Event){
    const inputEle = <HTMLInputElement>evt.target;
    this.score= Number(inputEle.value);
  }
  apply(color:string,fontSize:string){
    this.color=color;
    this.fontSize=fontSize;
  }
  toggleBorder(){
    this.isBordered=!this.isBordered;
  }
}
